<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app" >
<!--   v-model.lazy相当于离焦事件         -->
<!--            <input type="text" placeholder="用户名" v-model.lazy="name">-->
<!--            <span>{{tip}}</span>-->
            <input type="text" v-model="user.name">
            <input type="text" v-model="user.age">
            <input type="text" v-model="user.income">
        </div>
        <!--导包一定要双标签，不能单标签-->
        <script src="./node_modules/vue/dist/vue.js"></script>

        <script type="text/javascript">

            var vue = new Vue({
                el:"#app",
                data:{
                    name:"",
                    tip:"",
                    user:{
                        name:"",
                        age:"",
                        income:""
                    }
                },
                watch:{
                   /* name(newVal, oldVal) {
                        this.tip="校验中....";
                        //模拟ajax异步请求 setTimeout延时后只会执行一次 setInterval会循环执行
                        setTimeout( ()=> {
                            if (newVal == "admin") {
                                this.tip = "用户名已存在！";
                            } else {
                                this.tip="用户名可用"
                            }
                        },400)


                    }*/

                    user:{
                        deep:true ,//开启深度监控
                        handler(obj) {
                            console.log(obj)
                        }
                    }
                }

            })
        </script>
    </body>
</html>